<template>
  <div class="logistics-tracking">
    <el-row :gutter="20">
      <!-- 查询区域 -->
      <el-col :span="24">
        <el-card shadow="never" class="search-card">
          <template #header>
            <span class="title">物流跟踪查询</span>
          </template>
          
          <div class="track-search">
            <el-input
              v-model="trackingNo"
              placeholder="请输入运单号或物流单号"
              clearable
              size="large"
              class="track-input"
            >
              <template #prepend>
                <el-select v-model="carrierType" placeholder="承运商" style="width: 120px">
                  <el-option label="全部" value="all" />
                  <el-option label="顺丰速运" value="sf" />
                  <el-option label="圆通速递" value="yt" />
                  <el-option label="中通快递" value="zt" />
                  <el-option label="韵达快递" value="yd" />
                  <el-option label="申通快递" value="st" />
                </el-select>
              </template>
              <template #append>
                <el-button type="primary" @click="handleTrack">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
              </template>
            </el-input>
          </div>
        </el-card>
      </el-col>

      <!-- 物流信息 -->
      <el-col :span="24" v-if="trackingInfo">
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <span class="title">物流信息</span>
              <el-tag :type="getStatusType(trackingInfo.status)" size="large">
                {{ getStatusText(trackingInfo.status) }}
              </el-tag>
            </div>
          </template>

          <el-descriptions :column="3" border>
            <el-descriptions-item label="运单号">{{ trackingInfo.trackingNo }}</el-descriptions-item>
            <el-descriptions-item label="承运商">{{ trackingInfo.carrier }}</el-descriptions-item>
            <el-descriptions-item label="运输方式">{{ trackingInfo.transportType }}</el-descriptions-item>
            <el-descriptions-item label="发件人">{{ trackingInfo.senderName }}</el-descriptions-item>
            <el-descriptions-item label="发件电话">{{ trackingInfo.senderPhone }}</el-descriptions-item>
            <el-descriptions-item label="发件地址" :span="1">{{ trackingInfo.senderAddress }}</el-descriptions-item>
            <el-descriptions-item label="收件人">{{ trackingInfo.receiverName }}</el-descriptions-item>
            <el-descriptions-item label="收件电话">{{ trackingInfo.receiverPhone }}</el-descriptions-item>
            <el-descriptions-item label="收件地址" :span="1">{{ trackingInfo.receiverAddress }}</el-descriptions-item>
            <el-descriptions-item label="发件时间">{{ trackingInfo.sendTime }}</el-descriptions-item>
            <el-descriptions-item label="预计送达">{{ trackingInfo.estimatedTime }}</el-descriptions-item>
            <el-descriptions-item label="实际送达">{{ trackingInfo.actualTime || '未送达' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 物流轨迹 -->
      <el-col :span="16" v-if="trackingInfo">
        <el-card shadow="never" class="timeline-card">
          <template #header>
            <span class="title">物流轨迹</span>
          </template>

          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in trackingInfo.traces"
              :key="index"
              :timestamp="item.time"
              :type="getTraceType(index)"
              :size="index === 0 ? 'large' : 'normal'"
              placement="top"
            >
              <el-card shadow="hover">
                <div class="trace-content">
                  <div class="trace-status">{{ item.status }}</div>
                  <div class="trace-location">{{ item.location }}</div>
                  <div class="trace-desc" v-if="item.description">{{ item.description }}</div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>

      <!-- 地图展示 -->
      <el-col :span="8" v-if="trackingInfo">
        <el-card shadow="never" class="map-card">
          <template #header>
            <span class="title">运输路线</span>
          </template>

          <div class="map-container">
            <div class="route-info">
              <div class="route-point">
                <el-icon><LocationFilled /></el-icon>
                <span>起点：{{ trackingInfo.senderAddress }}</span>
              </div>
              <div class="route-distance">
                <el-icon><Position /></el-icon>
                <span>距离：{{ trackingInfo.distance }} 公里</span>
              </div>
              <div class="route-point">
                <el-icon><LocationFilled /></el-icon>
                <span>终点：{{ trackingInfo.receiverAddress }}</span>
              </div>
            </div>
            <div class="map-placeholder">
              <el-icon :size="60"><MapLocation /></el-icon>
              <p>地图加载中...</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 快速查询历史 -->
      <el-col :span="24" v-if="queryHistory.length > 0">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span class="title">查询历史</span>
              <el-button link type="primary" @click="clearHistory">
                <el-icon><Delete /></el-icon>
                清空历史
              </el-button>
            </div>
          </template>

          <div class="history-list">
            <el-tag
              v-for="(item, index) in queryHistory"
              :key="index"
              closable
              @close="removeHistory(index)"
              @click="quickTrack(item)"
              class="history-tag"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search, LocationFilled, Position, MapLocation, Delete
} from '@element-plus/icons-vue'

// 查询表单
const trackingNo = ref('')
const carrierType = ref('all')

// 物流信息
const trackingInfo = ref(null)

// 查询历史
const queryHistory = ref([])

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'info',
    shipping: 'primary',
    delivering: 'warning',
    signed: 'success',
    exception: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: '待发货',
    shipping: '运输中',
    delivering: '派送中',
    signed: '已签收',
    exception: '异常'
  }
  return textMap[status] || status
}

// 获取轨迹节点类型
const getTraceType = (index) => {
  return index === 0 ? 'success' : 'primary'
}

// 查询物流
const handleTrack = () => {
  if (!trackingNo.value) {
    ElMessage.warning('请输入运单号')
    return
  }

  // 添加到查询历史
  if (!queryHistory.value.includes(trackingNo.value)) {
    queryHistory.value.unshift(trackingNo.value)
    if (queryHistory.value.length > 10) {
      queryHistory.value.pop()
    }
  }

  // 模拟查询数据
  trackingInfo.value = {
    trackingNo: trackingNo.value,
    carrier: '顺丰速运',
    transportType: '陆运',
    status: 'shipping',
    senderName: '张三',
    senderPhone: '13800138000',
    senderAddress: '北京市朝阳区xxx街道xxx号',
    receiverName: '李四',
    receiverPhone: '13900139000',
    receiverAddress: '上海市浦东新区xxx路xxx号',
    sendTime: '2024-01-01 10:00:00',
    estimatedTime: '2024-01-03 18:00:00',
    actualTime: '',
    distance: 1200,
    traces: [
      {
        time: '2024-01-02 14:30:00',
        status: '运输中',
        location: '南京市江宁区中转中心',
        description: '快件已到达南京中转中心'
      },
      {
        time: '2024-01-02 08:00:00',
        status: '运输中',
        location: '天津市西青区中转中心',
        description: '快件已发出，正在运往下一站'
      },
      {
        time: '2024-01-01 18:00:00',
        status: '运输中',
        location: '北京市朝阳区中转中心',
        description: '快件已到达中转中心'
      },
      {
        time: '2024-01-01 10:00:00',
        status: '已揽收',
        location: '北京市朝阳区xxx营业点',
        description: '快件已被揽收，正在打包'
      }
    ]
  }

  ElMessage.success('查询成功')
}

// 快速查询
const quickTrack = (no) => {
  trackingNo.value = no
  handleTrack()
}

// 清空历史
const clearHistory = () => {
  queryHistory.value = []
  ElMessage.success('已清空查询历史')
}

// 删除历史记录
const removeHistory = (index) => {
  queryHistory.value.splice(index, 1)
}
</script>

<style scoped lang="scss">
.logistics-tracking {
  .search-card {
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: 500;
    }

    .track-search {
      .track-input {
        max-width: 800px;
      }
    }
  }

  .info-card,
  .timeline-card,
  .map-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .timeline-card {
    .trace-content {
      .trace-status {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 8px;
      }

      .trace-location {
        font-size: 14px;
        color: #606266;
        margin-bottom: 4px;
      }

      .trace-desc {
        font-size: 13px;
        color: #909399;
      }
    }
  }

  .map-card {
    .map-container {
      .route-info {
        margin-bottom: 20px;

        .route-point,
        .route-distance {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 0;
          color: #606266;

          .el-icon {
            color: #409eff;
          }
        }
      }

      .map-placeholder {
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f5f7fa;
        border-radius: 4px;
        color: #909399;

        .el-icon {
          color: #c0c4cc;
          margin-bottom: 12px;
        }
      }
    }
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    .history-tag {
      cursor: pointer;
      font-size: 14px;
      padding: 8px 12px;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>

